.header{
    height: 500px;
    background: url(../img/icon_bg_page1.jpg);
}
.body{
    height: 50px;
    width: 1000px;  
    padding-top: 50px;
}
.logo{
    width: 250px;
    height: 100%;
    background: url(../img/logo.png) no-repeat;
}
.right{
    width: 600px;
    height: 100%;
}
.right li{
    float: left;
    padding: 0px 15px;
    height:50px;
    line-height: 50px;
    text-align: center;
    font-size: 15px;
    color: #fff;
}
.link-app{
    width: 80px;
    height: 50px;
    position: relative;

}
.link-app:hover{
    background:rgb(0,0,0,0.5);
}
.link-app:hover .arrow {
    transform: rotate(180deg);
    
}
.link-app:hover .qrcode{
    display: block;
}       

.erweima{
    height: 20px;
    width: 20px;
    margin-top: 15px;
    background: url(../img/icon_qr.png) no-repeat center center;
}
.arrow{
    width: 20px;
    height: 20px;
    background: url(../img/arrow_down.png) no-repeat center center;
    margin-top: 15px;
}

.qrcode{
    width: 110px;
    height:120px;
    background:rgb(0,0,0,0.5) url(../img/qrcode.png ) no-repeat center center / 100% 100%;
    position: absolute;
    right: 0px;
    display: none;
}
.content{
    width: 500px;
    height: 400px;
   
}
.action{
    width: 300px;
    height: 200px;
    
}
.slogon{
    width: 100px;
    height: 120px;
    position: relative;
    animation: move0 .3s linear forwards ;
    background:  url(../img/t015d76ba438d87d444.png) no-repeat center center / 100% 100%;
}
@keyframes move0{
    from{
        top: 0px;

    }
    to{
        top: 20px;

    }
}
.show1{
    position: absolute;
    width: 8px;
    height: 8px;
    top: 30px;
    left: 20px;
    animation: bubles .4s .6s infinite ease-in forwards ;
}
@keyframes bubles{
    from{
        top: 60px;
        left: 20px;

    }
    to{
        top: 20px;
        left: 20px;
        opacity: 0;
    }
    
}

.show2 {
    position: absolute;
    width: 8px;
    height: 8px;
    top:50px;
    left: 40px;
    animation: bubles2 .7s infinite ease-in forwards ;
}
@keyframes bubles2{
    from{
        top: 60px;
        left: 40px;
        opacity: 0.6;

    }
    to{
        top: 20px;
        left: 40px;
        opacity: 0;
    }
    
}

.show3 {
    position: absolute;
    width: 8px;
    height: 8px;
    top:60px;
    left: 50px;
    animation: bubles3 .8s infinite ease-in forwards ;
}
@keyframes bubles3{
    from{
        top: 60px;
        left: 50px;
        opacity: 0.6;

    }
    to{
        top: 20px;
        left: 50px;
        opacity: 0;
    }
    
}

.show4 {
    position: absolute;
    width: 8px;
    height: 8px;
    top:60px;
    left: 60px;
    animation: bubles4 .8s infinite ease-in forwards ;
}
@keyframes bubles4{
    from{
        top: 60px;
        left: 50px;
        opacity: 0.6;

    }
    to{
        top: 10px;
        left: 50px;
        opacity: 0;
    }
    
}

.plogon{
    width: 100px;
    height: 120px;
    position: relative;
    animation: move .4s linear  forwards;
    background:  url(../img/t015d76ba438d87d444.png) no-repeat center center / 100% 100%;
}
@keyframes move{
    from{
    top:0px;

    }
     to{
    top: -40px;
     }
}



.white{
    width:55px;
    height:50px;
    position: absolute;
    bottom: 32px;
    left:25px;
    transition: .6s;
    background:   url(../img/t017337a546f51cd7b4.png) no-repeat center center / 100% 100%;
    
}
.bottom{
    width: 400px;
    height: 100px;
    background:  url(../img/t01fa494f80b7b4098b.png) no-repeat center center / 100% 100%;
    margin-top: 20px;
}

.footer{
    width: 400px;
    height: 50px;
    margin-top: 10px;
}
.footer .left{
    width: 180px;
    height: 50px;
    background:  url(../img/download_phone_btn.png) no-repeat center center / 100% 100%;
}
.footer .right{
    width: 180px;
    height: 50px;
    background:  url(../img/download_pc_btn.png) no-repeat center center / 100% 100%;
}
/* banner */
.banner{
    width: 1000px; 
    height: 500px;    
}
.banner .content{
    width: 700px;
    height: 200px;
    background:   url(../img/t013fa6edf830f0dbba.png) no-repeat center center / 100% 100%;
    position: relative;
    top: 100px;  
}
.box{
    width:80px;
    height: 60px;
    background: url(../img/index.png) no-repeat center center / 100% 100%;
    position: absolute;
    top: 50px;
    left: -30px;
    animation:app 3s ease-in 0s infinite;
}
@keyframes app{
    0%{
            transform: translate(0) translateZ(0);
        }
        30% {
            transform: translate(3px,-2px) translateZ(0);
        }
        60% {
            transform: translate(4px,3px) translateZ(0);
        }
        100% {
            transform: translate(0) translateZ(0);
        }
}
.sns{
    width: 20px;
    height: 20px;
    background:  url(../img/（PNG\ 图像，36x34\ 像素）.png) no-repeat center center / 100% 100%;
    position: absolute;
    left: 130px;
    top: 30px;
    animation: apps  4s  ease-in 0s infinite;
}
@keyframes apps{


    0%{
        transform: translate(0) translateZ(0);
    }
    30% {
        transform: translate(3px,-2px) translateZ(0);
    }
    60% {
        transform: translate(4px,3px) translateZ(0);
    }
    100% {
        transform: translate(0) translateZ(0);
    }

}
.icon{
    width: 18px;
    height: 18px;
    background:  url(../img/2（PNG\ 图像，26x30\ 像素）.png)  no-repeat center center / 100% 100%;
    position: absolute;
    top: 70px;
    left: 180px;
    animation-delay: .3s;
    animation: iconapp  4s  ease-in 0s infinite;
}
@keyframes iconapp{

    0%{
        transform: translate(0) translateZ(0);
    }
    30% {
        transform: translate(3px,-2px) translateZ(0);
    }
    60% {
        transform: translate(4px,3px) translateZ(0);
    }
    100% {
        transform: translate(0) translateZ(0);
    }

}
.game{
    width: 25px;
    height: 25px;
    background: url(../img/3index.png) no-repeat center center / 100% 100%;
    position: absolute;
    top:50px;
    left: 240px;
    animation-delay: .7s;
    animation: appgame 3s ease-in  0s infinite;
}

@keyframes appgame{

    0%{
        transform: translate(0) translateZ(0);
    }
    30% {
        transform: translate(3px,-2px) translateZ(0);
    }
    60% {
        transform: translate(4px,3px) translateZ(0);
    }
    100% {
        transform: translate(0) translateZ(0);
    }

}
.music{
    width: 22px;
    height: 26px;
    background:  url(../img/4index.png)  no-repeat center center / 100% 100%;
    position: absolute;
    top: 100px;
    left: 260px;
    animation-delay: .8s;
    animation: appmusic 3s ease-in  0s infinite;
    
}
@keyframes appmusic{

    0%{
        transform: translate(0) translateZ(0);
    }
    30% {
        transform: translate(3px,-2px) translateZ(0);
    }
    60% {
        transform: translate(4px,3px) translateZ(0);
    }
    100% {
        transform: translate(0) translateZ(0);
    }

}
 .pearson{
     width: 300px;
     height: 150px;
     background:  url(../img/5index.png) no-repeat center center / 100% 100%;
     position: absolute;
     top: 70px;
     left: 70px;

 }
 .foot{
     width: 115px;
     height: 50px;
     background:  url(../img/6index.png) no-repeat center center / 100% 100%;
     position: absolute;
     right: 2px;
     bottom: 15px;
     transform-origin: 3px 3px;
     animation: footapp 3s ease-in 0s infinite alternate;
 }
 @keyframes footapp{

    0% {
        transform: rotate(0deg) translateZ(0);
    }
    30% {
        transform: rotate(2deg) translateZ(0);
    }
    60% {
        transform: roate(10deg) translateZ(0);
    }
    100% {
        transform: rotate(20deg) translateZ(0);
    }


 }
.between{
    height: 500px;
    background: url(../img/t01ee82e7ef7f499d5e.png)  no-repeat center center;  
}
 .container{
    width: 1000px; 
    height: 500px; 
  
}
.container .banner{
    width: 550px;
    height: 200px;
    background:  url(../img/t01010ab7ea1ba3d43a.png) no-repeat center center/ 100% 100%;
    margin-top: 150px;
    position: relative;

}
.green{
    width: 80px;
    height: 50px;
    background: url(../img/index1.png)  no-repeat center center/ 100% 100%;
    position: absolute;
    left: 150px;
    top:-20px;
    animation-delay:.1s;
    animation:Random  3s ease-in infinite;
}
@keyframes Random{
    0% {
        transform: translate(0) translateZ(0);
    }
    25% {
        transform: translate(5px,-5px) translateZ(0);
    }
    50% {
        transform: translate(-5px) translateZ(0);
    }
    75% {
        transform: translateY(5px) translateZ(0);
    }
    100% {
        transform: translate(0) translateZ(0);
    }
}
.red{
    width: 80px;
    height: 50px;
    background:  url(../img/index2.png)  no-repeat center center/ 100% 100%;
    position: absolute;
    bottom:10px;
    left: -10px;
    animation:remmoer 3s ease-in .7s infinite;
}
@keyframes remmoer{
    0% {
        transform: translate(0) translateZ(0);
    }
    25% {
        transform: translate(5px,-5px) translateZ(0);
    }
    50% {
        transform: translate(-5px) translateZ(0);
    }
    75% {
        transform: translateY(5px) translateZ(0);
    }
    100% {
        transform: translate(0) translateZ(0);
    }
    
}

.between .pearson{
    width: 350px; 
    height: 150px;
    background:  url( ../img/index3.png) no-repeat  center center / 100% 100% ;
    position: absolute;
    left: -12px;
    top:-10px;
    animation: pearsonmover 3s ease-in .7s infinite
  
 
}
@keyframes pearsonmover {
    0% {
        transform: translate(0) translateZ(0);
    }
    25% {
        transform: translate(5px,-5px) translateZ(0);
    }
    50% {
        transform: translate(-5px) translateZ(0);
    }
    75% {
        transform: translateY(5px) translateZ(0);
    }
    100% {
        transform: translate(0) translateZ(0);
    }  
}
.yellow{
    width: 40px;
    height: 40px;
    background: url(../img/（PNG\ 图像，107x73\ 像素）3.png) no-repeat center center / 100% 100%;
    position: absolute;
    bottom: 20px;
    left: 300px;
    animation: MoveRandom  3s ease-in .7s infinite;
}
@keyframes MoveRandom{
    0% {
        transform: translate(0) translateZ(0);
    }
    25% {
        transform: translate(5px,-5px) translateZ(0);
    }
    50% {
        transform: translate(-5px) translateZ(0);
    }
    75% {
        transform: translateY(5px) translateZ(0);
    }
    100% {
        transform: translate(0) translateZ(0);
    }  
}
.four{
    width: 1000px;
    height: 500px;
}
.four .content{
    width: 550px;
    height: 200px;
    background:  url(../img/t014bb94cd860885c6d.png) no-repeat center center / 100% 100%;
    margin-top: 150px;
    position: relative;

}
.bg-left{
    width: 100px;
    height: 50px;
    background: url(../img/index111.png) no-repeat center center / 100% 100%;
    position: absolute;
    top:30px;
    left:-35px;
    z-index: -1;
}
.bg-backend{
    width: 80px;
    height: 60px;
    background: url(../img/index112.png) no-repeat center center / 100% 100%;
    position: absolute;
    left: 145px;
    top:-40px;
    z-index:-3;
}
.bg-front{
    width: 80px;
    height: 50px;
    background: url(../img/index113.png) no-repeat center center / 100% 100%;
    position: absolute;
    left: 220px;
    top:-10px;
    z-index:-2;
}
.finger{
    width: 22px;
    height: 6px;
    background: url(../img/index1110.png)  no-repeat center center / 100% 100%;
    position: absolute;
    left:178px;
    top:78px;
    animation: ani-finger 1s ease-in infinite;
    transform-origin: left;
}
@keyframes ani-finger{
    0% {
        transform: rotate(10deg) translateZ(0);
    }
    50% {
        transform: rotate(-15deg) translateZ(0);
    }
    100% {
        transform: rotate(10deg) translateZ(0);
    }
}
.iconfooter{
    width: 20px;
    height: 8px;
    background: url(../img/index1111111.png) no-repeat center center / 100% 100%;
    position: absolute;
    left: 210px;
    bottom: 9px;
    animation: ani-footer 2s ease-in infinite;
}
@keyframes ani-footer{
    0% {
        transform: rotate(0) translateZ(0);
    }
    50% {
        transform: rotate(-10deg) translateZ(0);
    }
    100% {
        transform: rotate(0) translateZ(0);
    }
}
.pan{
    width:40px;
    height: 30px;
    background: url(../img/22222index.png) no-repeat center center / 100% 100%;
    position: absolute;
    left: 250px;
    bottom: 10px;
}
.leaf-left{
    width: 20px;
    height: 40px;
    background:  url(../img/333333index.png)  no-repeat center center / 100% 100%;
    position: relative;
    top: -38px;
    left: -10px;
    transform-origin: 50% 100%;
    animation: ani-flower 3s ease-in infinite;
}
@keyframes ani-flower{
    0% {
        transform: rotate(0) translateZ(0);
    }
    33.3% {
        transform: rotate(-3deg) translateZ(0);
    }
    66.6% {
        transform: rotate(3deg) translateZ(0);
    }
    100% {
        transform: rotate(0) translateZ(0);
    }
}
.leaf-middel{
    width: 20px;
    height: 40px;
    background: url(../img/444444（PNG\ 图像，33x89\ 像素）.png)  no-repeat center center / 100% 100%;
    position: relative;
    top:-78px;
    left: 5px;
    transform-origin: 50% 100%;
    animation: ani-flower1 3s ease-in .6s infinite;
}

@keyframes ani-flower1{
    0% {
        transform: rotate(0) translateZ(0);
    }
    33.3% {
        transform: rotate(-4deg) translateZ(0);
    }
    66.6% {
        transform: rotate(4deg) translateZ(0);
    }
    100% {
        transform: rotate(0) translateZ(0);
    }
}
.leaf-right{
    width: 20px;
    height: 40px;
    background: url(../img/5555555index.png)  no-repeat center center / 100% 100%;
    position: relative;
    top: -118px;
    left: 25px;
    transform-origin: 50% 100%;
     animation: ani-flower2 3s ease-in .7s infinite;;
}


@keyframes ani-flower2{
    0% {
        transform: rotate(0) translateZ(0);
    }
    33.3% {
        transform: rotate(4deg) translateZ(0);
    }
    66.6% {
        transform: rotate(-4deg) translateZ(0);
    }
    100% {
        transform: rotate(0) translateZ(0);
    }
}
.nav{
    width: 1000px;
    height: 500px;
}
.nav .content{
    width: 500px;
    height: 200px;
    margin-top:150px;
    position: relative;
    background:  url(../img/t019849054a6201233d.png)  no-repeat center center / 100% 100%;
}
.ipearson{
    width: 190px;
    height: 170px;
    background: url(../img/index777777777.png)  no-repeat center center / 100% 100%;
    position: absolute;
    left: -20px;
    bottom:10px;
}
.diantong{
    width: 50px;
    height: 70px;
    background: url(../img/index99999999999.png)  no-repeat 0 0/ 100% 100%;
    position: absolute;
    left:165px;
    top:55px;
    transform-origin: left;
    animation: ani-diantong 2s ease-in infinite

}
 @keyframes ani-diantong{
    0% {
        transform: rotate(0) translateZ(0);
    }
    33.3% {
        transform: rotate(3deg) translateZ(0);
    }
    66.6% {
        transform: rotate(-3deg) translateZ(0);
    }
    100% {
        transform: rotate(0) translateZ(0);
    }

}